import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import { Layout, Button } from 'antd'
import Modal from 'src/components/Modal'
import './index.less'
const { Header, Content } = Layout;

/**
 * hooks父组件调用子组件内的方法
 * @param {*} props 
 * @param {*} ref 
 * @returns 
 */
const FancyInput = (props, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        }
    }));
    return <input ref={inputRef} />;
}
const FancyInputComponent = forwardRef(FancyInput);

const Address = () => {
    const ref = useRef(null)
    const handleClick = () => {
        ref.current.focus && ref.current.focus()
    }
    const handleClickA = () => {
        const A = (props) => {
            useEffect(() => {
                props.setOkListener(() => {
                    return 'ok'
                })
                props.setCancelLister(() => {
                    return 'cancel'
                })
            }, [])
            return <div>
                <Button onClick={() => props.closeModal('closeModal')}>关闭</Button>
            </div>
        }
        Modal.show({
            title: "测试A",
            children: <A />
        }).then(res => {
            console.log(res)
        })
    }
    const handleClickB = () => {
        let close
        Modal.show({
            title: "测试B",
            bindClose: (cb) => {
                close = cb
            },
            children: <div>
                <Button onClick={() => close('closeModal')}>关闭</Button>
            </div>
        }).then(res => {
            console.log(res)
        })
    }
    return <Layout className="address-container">
        <Button onClick={handleClick}>focus</Button>
        <Button onClick={handleClickA}>测试A</Button>
        <Button onClick={handleClickB}>测试B</Button>
        <FancyInputComponent ref={ref} />
        <Content>收货地址</Content>
    </Layout>
}

export default Address